<template>
  <div class="custom_search" :class="item.data.isFixed ? 'fixed' : ''">
    <form action="/">
      <van-search
        :class="item.data.isTransparent ? 'transparent' : ''"
        v-model="value"
        shape="round"
        :placeholder="item.data.placeholder"
        @search="onSearch"
      />
    </form>
    <slot name="searchcontent" :value="value"></slot>
  </div>
</template>
<script>
export default {
  name: "search",
  props: {
    item: {
      type: Object,
      default() {
        return {
          data: {
            placeholder: this.$t("lang.请输入搜索关键词"),
            keys: [this.$t("lang.电脑")],
            isTransparent: false,
            isFixed: false,
          },
        };
      },
    },
  },
  data() {
    return {
      value: "",
    };
  },
  created() {
    //this.value = this.$props.item.data.keys.join(" ");
  },
  methods: {
    onSearch(v) {
      console.log(v);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_search {
  .van-search {
    background-color: #c82519;
    &.transparent {
      background-color: transparent;
      .van-search__content {
        box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
      }
    }
  }
  &.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    .van-search {
      &.transparent {
        background-color: transparent;
        .van-search__content {
          box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
        }
      }
    }
  }
}
</style>
